<template>
    <div>

    </div>
</template>

<script>
// target1: 构建一个矩形平面 由两个三角形的顶点数据组成，可才开（注意三角形的正反面问题）
// target2：几何体的顶点索引数据：比如下面vertices这个变量定义重合线的顶点数据时，重复的可以借用顶点索引来解决
import * as THREE from "three";
let scene=new THREE.Scene();
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 之前的圆形 长方体 球体等都是基于这个类构建的。
// 创建一个缓冲实例，用于保存顶点位置数据 BufferGeometry是一个无任何形状的空几何体，由它定义任何几何体形状
// 一 创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//1. 创建顶点位置数据 用于体现target1
// const vertices = new Float32Array([
//     0, 0, 0,
//     80, 0, 0,
//     80, 80, 0,

//     0, 0, 0,
//     80, 80, 0,
//     0, 80, 0,
// ]);
// 创建顶点索引数据 用于体现target2
const vertices = new Float32Array([
    0, 0, 0,//0
    80, 0, 0,//1
    80, 80, 0,//2

    0, 80, 0,//3
]);
const index = new Uint16Array([
    0, 1, 2,
    0, 2, 3,
]);
//2.定义定点数据 创建一个属性缓冲区对象，来表示几何体的顶点位置数据 参数1：顶点位置数据 2：每个顶点数据项的分量数量
const attribute = new THREE.BufferAttribute(vertices, 3);
// 创建顶点索引数据属性缓冲区对象
const indexAttribute = new THREE.BufferAttribute(index, 1);
console.log("attribute", attribute);
// 3.设置几何体的顶点位置属性或者geometry.setAttribute('position', attribute);
 geometry.attributes.position = attribute;
 geometry.setIndex(indexAttribute);//  geometry.index = indexAttribute;
//  geometry.setIndex(index,indexAttribute);
// 之前
// // 基础网格材质
let material = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    side: THREE.DoubleSide
}); 
//创建一个网格模型物体（网格模型渲染几何体）
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);


let camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);

let axesHelper = new THREE.AxesHelper(100);
axesHelper.setColors(0xff0000, 0x00ff00, 0x0000ff);
scene.add(axesHelper);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls( camera, renderer.domElement );
renderer.render(scene, camera);
controls.addEventListener('change', function () {
    renderer.render(scene, camera);
});
export default {
}
</script>

<style scoped>

</style>